<template>
  <div class="goodsDesc">
    <myheader title="商品列表">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
    </myheader>
    <van-cell>
      <!-- 使用 title 插槽来自定义标题 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in imgs" :key="item.src">
          <img v-lazy="item.src" />
        </van-swipe-item>
      </van-swipe>
    </van-cell>
    <!-- 添加商品操作 -->
    <van-cell class="goodsOption">
      <h2>{{ goodsInfo.title }}</h2>
      <van-divider
        :style="{
          color: '#1989fa',
          padding: '0 5px',
          borderColor: '#666',
        }"
      ></van-divider>
      <van-card>
        <template #title>
          <div class="goodPrice">
            <span class="oriPrice">市场价:￥{{ goodsInfo.market_price }}</span>
            <span>销售价:</span>
            <span class="sellPrice">￥{{ goodsInfo.sell_price }}</span>
          </div>
        </template>
        <template #tags>
          <div class="buynum">
            <span>购买数量:</span>
            <van-stepper v-model="value" />
          </div>
        </template>
        <template #bottom>
          <div class="opBtnGroup">
            <van-button type="info" size="normal">立即购买</van-button>
            <van-button type="danger" @click="addToCar">加入购物车</van-button>
          </div>
        </template>
      </van-card>
    </van-cell>
    <van-cell class="goodsInfo">
      <h4>商品参数</h4>
      <van-divider
        :style="{
          color: '#1989fa',
          padding: '0 5px',
          borderColor: '#666',
        }"
      ></van-divider>
      <van-card>
        <template #title>
          <div class="info">商品货号:{{ goodsInfo.goods_no }}</div>
          <div class="info">库存情况:{{ goodsInfo.stock_quantity }}</div>
          <div class="info">上架时间:{{ goodsInfo.add_time | dateFormat }}</div>
        </template>
      </van-card>
    </van-cell>
    <!-- 两个按钮 -->
    <van-cell>
      <div class="btnGroup">
        <van-button
          type="info"
          plain
          block
          @click="$router.push({ path: '/goods/desc/' + goodsInfo.id })"
          >图文介绍</van-button
        >
        <van-button
          type="danger"
          plain
          block
          @click="$router.push({ path: '/comment/' + goodsInfo.id })"
          >商品评论</van-button
        >
      </div>
    </van-cell>
  </div>
</template>


<script>
import myheader from "@/components/Header.vue";
import { getGoodsInfo } from "@/api/goods.js";
import { getThumImages } from "@/api/img.js";
import { dateFormat } from "@/utils/filters.js";
import { EventBus } from "@/utils/eventBus.js";
export default {
  data() {
    return {
      value: 1,
      goodsInfo: {},
      imgs: [],
    };
  },
  components: {
    myheader,
  },
  methods: {
    jumpToDesc() {
      this.$router.push("/goods/desc/" + this.$route.params.id);
      console.log(this.$route.params);
    },

    addToCar() {
      // 先拿到购物车列表
      let goodsGroup = JSON.parse(localStorage.getItem("goodsGroup"));
      if (!goodsGroup) {
        goodsGroup = [];
      }
      goodsGroup.push({ id: this.$route.params.id, num: this.value });
      localStorage.setItem("goodsGroup", JSON.stringify(goodsGroup));
      EventBus.$emit("addNum", this.value);
    },
  },
  filters: {
    dateFormat,
  },
  async mounted() {
    let res = await getGoodsInfo(this.$route.params.id);
    console.log(res);
    this.goodsInfo = res.data.message[0];

    let imgRes = await getThumImages(this.goodsInfo.id);
    console.log(imgRes);
    this.imgs = imgRes.data.message;
  },
  filters: {
    dateFormat,
  },
};
</script>


<style lang="less" scoped>
.goodsDesc {
  padding-bottom: 80px;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  //商品购买操作的样式
  .goodsOption {
    h2 {
      color: rgb(19, 130, 182);
      margin: 0 7px;
    }
    //购买数量
    .buynum {
      padding-top: 20px;
      display: flex;
      span {
        padding-right: 40px;
      }
    }
  }
  .goodsInfo {
    .info {
      padding-left: 20px;
    }
  }
  .goodPrice {
    .oriPrice {
      margin-right: 20px;
      text-decoration: line-through;
    }
  }
  .sellPrice {
    color: red;
    font-size: 25px;
  }
  .btnGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 30vw;
    font-size: 40px;
  }
  .opBtnGroup {
    display: flex;
    justify-content: space-between;
    padding: 15px 30px;
  }
}
</style>